<template>
  <div class="lineItem">
    <div class="flow">
      <ul class="clearfix">
        <li><span></span> <p>有人邀请</p></li>
        <li class="current"><span></span> <p>等待开工</p></li>
        <li><span></span><p>正在干活</p></li>
        <li><span></span><p>等待验收</p></li>
        <li><span></span><p>等待收款</p></li>
        <li><span></span><p>等待评价</p></li>
        <li class="lastChild"><span></span><p>已完成</p></li>
      </ul>
    </div>
    <div class="lineItem_info employer">
      <h2>{{ employer.title }}</h2>
      <div class="employerText clearfix">
        <img :src="employer.img" alt="">
        <div class="textRight">
          <h4>{{ employer.name }} <span>诚信值:<em>{{ employer.faithValue }}</em></span></h4>
          <p>{{ employer.phone }}</p>
          <p>成交<em>{{ employer.succeed }}</em> 好评<em>{{ employer.praise }}</em> 差评<em>{{ employer.iBadReviewmg }}</em></p>
          <p>成交<em>{{ employer.succeed }}</em> 好评<em>{{ employer.praise }}</em> 差评<em>{{ employer.iBadReviewmg }}</em></p>
          <p>成交<em>{{ employer.succeed }}</em> 好评<em>{{ employer.praise }}</em> 差评<em>{{ employer.iBadReviewmg }}</em></p>
        </div>
      </div>
    </div>
    <div class="lineItem_info">
      <h2>{{ linggongTitle }}</h2>
      <ul>
        <li class="address">
          <span><i class="iconfont icon-dingwei"></i>雇主地址:</span>
          <strong>{{ datas.employerInfo_add }}</strong>
        </li>
        <li class="address">
          <span><i class="iconfont icon-shijian"></i>干活时间:</span>
          <strong>{{ datas.work_time }}</strong>
        </li>
      </ul>
    </div>
    <div class="lineItem_info firm_info">
      <ul>
        <li>
          <h4>{{ firm_info.title }}<span><em>{{ firm_info.money }}</em>元/每天</span></h4>
          <p>x{{ firm_info.number }}</p>
        </li>
        <li>
          <h4><i>预计赚到：</i><span><em>{{ firm_info.forecastNum }}</em>元</span></h4>
        </li>
      </ul>
    </div>
    <div class="lineItem_time orderList">
      <ul>
        <li>
          <span>创建时间:</span>
          <strong>{{ datas.creation_time }}</strong>
        </li>
        <li>
          <span>订单号:</span>
          <strong>{{ datas.order_number }}</strong>
        </li>
      </ul>
    </div>
    <div class="download clearfix">
      <span>{{ datas.Download }}</span><a @click="download" href="javascript:void(0);">立即下载</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'lineItem',
    data () {
      return {
        linggongTitle:'零工信息',
        firm_info:{
          title:'打扫房间',
          money:150,
          number:5,
          forecastNum:481.60
        },
        employer:{
          title:'雇主',
          img:'../static/images/a.jpg',
          name:'欧阳重名重名重名',
          phone:'15821587485',
          faithValue:100,
          succeed:9999,
          praise:59999,
          iBadReviewmg:9999
        },
        datas:{
          employerInfo_name: '张老板',
          employerInfo_phone: '15901515270',
          employerInfo_add: '北京市丰台区东营里5号红狮家园4区5楼2门',
          work_time: '2017年8月28日 11:00-17:00  2017年12月14日 11:00-17:00',
          leave_msg: '请及时电话沟通',
          creation_time: '2017年12月14日（14:00) 2017年12月14日（14:00)',
          order_number: '27836134109154976839500750401-R-ca0c263a2eac49a39957e982726276da-1508999853332',
          title: '北京天天美尚股份有限公司',
          title_btn: '等待开工',
          contentText_text:'高端家政服务',
          univalence_number:45,
          univalence_amount:2,
          Download: '下载打零工APP查看并管理更多订单信息'
        }
      }
    },
    methods:{
      download(){
        this.$router.push({path:'/download'})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .lineItem{margin:28.6% 0 16%;}
  .lineItem_time{margin-top: .6rem;background: #fff;font-size: 1rem;padding:.2rem 0;}
  .lineItem_time ul li{padding:1rem 0;}
  .lineItem_time li{padding:.5rem 0;border-bottom:1px solid #f2f2f2;}
  .lineItem_time li:last-child{border-bottom:0;}
  .lineItem_time span,.lineItem_info li span{color:#999;display: inline-block;width:86px;height:100%;line-height: 100%;padding:0 2% 0 1rem;}
  .lineItem_time span i,.lineItem_info li span i{font-size: 1rem;margin-right:3px;color:#f3b764;}
  .lineItem_time strong,.lineItem_info li strong{font-weight: 400;width:64.5%;display: inline-block;}
  .flow{background: #fff;border-bottom:1px solid #f2f2f2;padding:.6rem 0;position:fixed;top:0;width:100%;left:0;z-index: 99999;}
  .flow ul{width:92%;margin:0 auto;padding-bottom: 2rem;}
  .flow li{position:relative;border:0;width:15.35%;float:left;font-size: .7rem;color:#999;padding:30px 0 0;background: url("../assets/images/flow_bg.png") repeat-x 0 72%;text-align: center;}
  .flow li span,.flow .current li span{min-height:.82rem;padding:1rem 0 .5rem 0;display: inline-block;width:48%;text-align: center;background: url("../assets/images/flow01_05.png") no-repeat;background-size: 100%;}
  .flow li,.flow .current li{min-height:2.4rem;}
  .flow li:first-child{width:11.4%;text-align: left;}
  .flow li:first-child span{width:66.1%;}
  .flow li p{position:absolute;bottom:-15px;left:-5%;width:120%;}
  .flow li:first-child p{width:155%;left:-24%;}
  .flow li:nth-child(2) p,.flow li:nth-child(4) p,.flow li:nth-child(6) p{top:10px;left:0rem;margin-left:2%;text-align: center;}
  .flow li.lastChild{width:11.4%;text-align: right;}
  .flow li.lastChild span{width:66.1%;}
  .flow li.lastChild p{width:153%;botom:0;left:0rem;margin-left:-11%;text-align: center;}
  .flow li.current span{background: url("../assets/images/flow01_03.png") no-repeat;background-size: 100%;}
  .flow li.current p{color:orange;}
  .lineItem_info ul{background: #fff;}
  .lineItem_info h2{margin-top: .6rem;height:2.2rem;line-height: 2.2rem;font-size: 1.1rem;font-weight: 400;padding:0 1rem;color:#999;}
  .lineItem_info li{padding:1rem 1rem 1rem 0;position:relative;border-bottom: 1px solid #f7f7f7;}
  .lineItem_info li.address strong,.orderList li strong{width:74%;padding-left:26%;}
  .lineItem_info li.address span i.icon-dingwei{font-size: 1.3rem;}
  .lineItem_info li span i.icon-shijian{margin:0 5px 0 3px;font-size: 1rem;}
  .lineItem_info li.address span,.orderList li span{position:absolute;top:1.1rem;left:.7rem;height:auto;padding:0 0 0 0;}
  .orderList{background: none;}
  .orderList ul li{border:none;padding:.3rem 1rem 0 0;color:#999;position:relative;}
  .orderList li span{width:22%;text-align: left;top:.5rem;left:1rem;}
  .orderList li strong{padding-left: 21%;width:75%;word-wrap: break-word;}
  .firm_info{padding:0 1rem;margin-top: .6rem;background: #fff;position:relative;}
  .firm_info li{padding:.6rem 0;}
  .firm_info p{text-align: right;color:#999;}
  .firm_info h4{padding-right: 36%;position:relative;font-weight: 400;line-height: 32px;}
  .firm_info h4 span{position:absolute;top:50%;right:0;margin-top:-9px;width:36%;line-height: 19px;padding:0;color:red;font-weight: 400;text-align: right;}
  .firm_info h4 span em{font-weight: bold;}
  .firm_info h4 i{color:#999;}
  .employerText{padding:1rem;background: #fff;position:relative;}
  .employerText img{width:2.8rem;height:2.8rem;border-radius: 50%;border:1px solid #f3b764;margin:3px 3% 1% 0;position:absolute;top:50%;left:1rem;margin-top: -1.4rem;}
  .employerText .textRight{width:83%;padding-left: 3.6rem;}
  .employerText .textRight h4{font-weight: 400;font-size: 1rem;color:#000;line-height: 24px;}
  .employerText .textRight h4 span{font-size: 12px;color:#999;}
  .employerText .textRight h4 span em,.employerText .textRight p em{color:#f3b764;}
  .employerText .textRight p{font-size: 14px;}
  .download{font-size: .9rem;background: #fff;position:fixed;bottom:0;width:100%;padding:5% 0;}
  .download span{display: block;width:63%;float: left;color:#ffa200;margin-left: 1rem;;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
  .download a{display:block;width:26%;text-align: center;color:#fff;background: #ffa200;border-radius: 16px;line-height:2.5rem;position: absolute;top:50%;right:1rem;margin-top: -1.28rem;}
  @media screen and (min-width: 320px) and (max-width: 370px){
    .flow li span,.flow .current li span{min-height:.4rem;}
    .flow li,.flow .current li{min-height:2.2rem;}
    .lineItem{margin:35% 0 16%;}
    .lineItem_info li.address strong{width:67%;padding-left:33%;}
    .orderList li strong{padding-left:26%;}
  }
  @media screen and (min-width: 371px) and (max-width: 410px){
    .flow li span,.flow .current li span{min-height:.6rem;}
    .flow li,.flow .current li{min-height:2.3rem;}
    .lineItem{margin:30.3% 0 16%;}
    .lineItem_info li.address strong{width:72%;padding-left:28%;}
    .orderList li strong{padding-left: 24%;}
  }
</style>
